import { Button, Form, Input, Toast } from "antd-mobile";
import React, { useState } from "react";
import { resetPwd } from "../API/LoginAPI";
import { useHistory } from "react-router-dom";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import Header from "../../Header";

export default function ChangePass() {
  const history = useHistory();
  const [visible, setvisible] = useState(false);
  const [visible2, setvisible2] = useState(false);

  const onFinish = async (values: any) => {
    console.log(values);

    const res = await resetPwd(values);
    console.log(res);
    if (res.data.code === 200) {
      Toast.show({
        content: res.data.msg,
      });
      history.push("/mine");
    } else {
      Toast.show({
        content: res.data.msg,
      });
    }
  };

  return (
    <>
      <Header title='修改密码'></Header>
      <div className="boss xz-content">
        <Form
          layout="horizontal"
          onFinish={onFinish}
          footer={
            <>
              <Button block type="submit" color="primary" size="large">
                修改密码
              </Button>
            </>
          }
        >
          <Form.Item
            name="oldPassword"
            label="旧密码"
            rules={[
              { required: true, message: "旧密码不能为空" },
              { type: "string", min: 6 },
              {
                pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/,
                message: "必须大写字母开头，包含数字，大小写字母",
              },
            ]}
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setvisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setvisible(false)} />
                )}
              </div>
            }
          >
            <Input
              type={visible ? "text" : "password"}
              placeholder="请输入旧密码"
            />
          </Form.Item>
          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[
              { required: true, message: "新密码不能为空" },
              { type: "string", min: 6 },
              {
                pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/,
                message: "必须大写字母开头，包含数字，大小写字母",
              },
            ]}
            extra={
              <div>
                {!visible2 ? (
                  <EyeInvisibleOutline onClick={() => setvisible2(true)} />
                ) : (
                  <EyeOutline onClick={() => setvisible2(false)} />
                )}
              </div>
            }
          >
            <Input
              type={visible2 ? "text" : "password"}
              placeholder="请输入密码"
            />
          </Form.Item>
        </Form>
      </div>
    </>
  );
}
